<template>
  <business-layout custom-title>
    <a-spin :spinning='loading'>
      <a-form :form='form' v-bind='formLayout' @submit='handleSubmitData'>
        <h2 class='title'>导出历史数据：</h2>

        <a-form-item label='所属模块'>
          <a-select placeholder='请选择所属模块' :options='moduleList'
                    v-decorator="['moduleId',{ rules: [{ required: true, message: '请选择所属模块!' }]}]"
                    @change='handleChangeModule'></a-select>
        </a-form-item>

        <a-form-item label='所属系统'>
          <!--          handleChangeSystem-->
          <a-select placeholder='请选择所属系统' :options='systemList'
                    v-decorator="['systemId',{ rules: [{ required: true, message: '请选择所属系统!' }]}]"
                    @change='handleChangeSystem'></a-select>
        </a-form-item>

        <a-form-item label='所属设备'>
          <a-select placeholder='请选择所属设备' :options='deviceList'
                    v-decorator="['deviceId',{ rules: [{ required: true, message: '请选择所属设备!' }]}]"
                    @change='handleChangeDevice'></a-select>
        </a-form-item>

        <a-form-item label='所属点位'>
          <a-select placeholder='请选择所属点位' :options='pointList'
                    showSearch
                    mode='multiple'
                    :filterOption='filterOptionFun'
                    v-decorator="['pointId',{ rules: [{ required: true, message: '请选择所属点位!' }]}]">
          </a-select>
        </a-form-item>

        <a-form-item label='开始时间'>
          <a-date-picker style='width: 100%' placeholder='请选择开始时间'
                         valueFormat='YYYY-MM-DD 00:00:00'
                         format='YYYY-MM-DD 00:00:00'
                         :disabled-date='startDisabledDate'
                         v-decorator="['startTime']" />
        </a-form-item>

        <a-form-item label='结束时间'>
          <a-date-picker style='width: 100%' placeholder='请选择结束时间'
                         format='YYYY-MM-DD 23:59:59'
                         valueFormat='YYYY-MM-DD 23:59:59'
                         :disabled-date='endDisabledDate'
                         v-decorator="['endTime']" />
        </a-form-item>

        <a-form-item label=''>
          <div class='btns'>
            <a-button type='primary' html-type='submit'>确定</a-button>
            <a-button html-type='reset' style='margin-left: 20px' @click='handleReset'>重置</a-button>
          </div>
        </a-form-item>
      </a-form>
    </a-spin>
  </business-layout>
</template>

<script>

import { findAllDeviceBySystemId, findAllPointByDeviceId, findAllSystemByModuleId } from '@/api/historyTime'
import { exportHistoryData } from '@/api/dataExport'
import { mapState } from 'vuex'
import moment from 'moment/moment'

export default {
  components: {},
  data() {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 22 }
      }
    }
    return {
      form: this.$form.createForm(this),
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 21, offset: 3 }
        }
      },
      systemList: [],
      deviceList: [],
      pointList: [],
      loading: false
    }
  },
  computed: {
    ...mapState({
      moduleList: state => state.dataDicInfo.modules.map(item => {
        return {
          ...item,
          key: item.code,
          label: item.name
        }
      })
    })
  },
  created() {
    console.log(this.moduleList)
  },
  methods: {
    startDisabledDate(startValue) {
      const endValue = this.form.getFieldValue('endTime')
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > moment(endValue).valueOf()
    },
    endDisabledDate(endValue) {
      const startValue = this.form.getFieldValue('startTime')
      if (!startValue || !endValue) {
        return false
      }
      return moment(startValue).valueOf() >= endValue.valueOf()
    },
    filterOptionFun(inputValue, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0
      )
    },
    handleReset() {
      this.form.resetFields()
    },
    handleSubmitData(e) {
      e.preventDefault()
      const form = this.form
      form.validateFields((errors, values) => {
        if (!errors) {
          exportHistoryData({
            ...values,
            pointId: values.pointId.join(','),
            startTime: values.startTime || '',
            endTime: values.endTime || ''
          })
        }
      })
    },
    handleChangeModule(val) {
      this.moduleId = val
      this.form.setFieldsValue({
        systemId: '',
        deviceId: '',
        pointId: []
      })
      this.getSystemList(val)
    },
    handleChangeSystem(val) {
      this.form.setFieldsValue({
        deviceId: '',
        pointId: []
      })
      this.form.setFieldsValue({
        deviceId: ''
      })
      this.getDeviceList(val)
    },
    handleChangeDevice(val) {
      this.form.setFieldsValue({
        pointId: []
      })
      this.getPointList(val)
    },
    getSystemList(moduleId) {
      findAllSystemByModuleId({
        moduleId
      }).then(result => {
        this.systemList = result.map(item => {
          return {
            ...item,
            key: item.systemId,
            label: item.systemName
          }
        })
      })
    },
    getDeviceList(systemId) {
      findAllDeviceBySystemId({
        systemId,
        moduleId: this.moduleId
      }).then(result => {
        this.deviceList = result.map(item => {
          return {
            ...item,
            key: item.deviceId,
            label: item.deviceName
          }
        })
      })
    },
    getPointList(deviceId) {
      findAllPointByDeviceId({
        deviceId,
        moduleId: this.moduleId
      }).then(result => {
        this.pointList = result.map(item => {
          return {
            ...item,
            key: item.positionId,
            label: item.positionName
          }
        })
      })
    }
  }
}
</script>

<style lang='less' scoped>
.title {
  padding-bottom: 30px;
}

.btns {
  display: flex;
  justify-content: center;
}
</style>